<template>
  <!-- 1.4 资产字段为系统设置字段，
自动查询展示，Excel字段读取Excel列头，
与资产字段全字匹配；数据类型、是否必填自动带出【2.1】 -->
  <el-table
    ref="table"
    v-loading="page.loading"
    border
    :data="tableData"
    row-key="System_10_10"
    height="100%"
    style="position:absolute"
    highlight-current-row
    @row-click="OnrowClick"
    @selection-change="onSelectionChange"
    @select="onSelect"
    @select-all="onSelect"
  >
    <el-table-column v-if="showselect" type="selection" width="40">
    </el-table-column>
    <el-table-column type="index" width="40"> </el-table-column>
    <!-- 资产字段为系统设置字段 -->
    <el-table-column prop="SYS_ASSET_A1_50" label="字段" width="110">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="page.search"
          size="small"
          placeholder="输入关键字搜索"
          clearable
        />
      </template>
    </el-table-column>
    <!-- 自动查询展示，Excel字段读取Excel列头 -->
    <el-table-column label="Excel字段">
      <template slot-scope="scope">
        <el-select
          v-model="excelcolform[scope.row.SYS_ASSET_A1_50]"
          placeholder="请选择"
          clearable
          filterable
          @change="
            val => {
              onColChange(val, scope.row.SYS_ASSET_A1_50);
            }
          "
        >
          <el-option
            v-for="(item, index) in excelCol"
            :key="index"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="数据类型" prop="SYS_ASSET_A1_170" width="80">
    </el-table-column>
    <el-table-column label="是否必填" width="80"> </el-table-column>
  </el-table>
</template>

<script>
import { AssetA1 } from "@/api";
export default {
  data() {
    return {
      //页面控制
      page: {
        loading: true,
        search: ""
      },
      //数据
      data: {
        sysAssetA1Data: []
      },
      value: "",
      excelcolform: {}
    };
  },
  inject: ["A1List"],
  //外部属性
  props: {
    showselect: {
      type: Boolean,
      default() {
        return false;
      }
    },
    //读取的excel列
    excelCol: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  //内部方法
  methods: {
    initPage() {
      this.page.loading = true;
      this.data.sysAssetA1Data = [...this.A1List.data.sysAssetA1Data];
      let newform = {};
      this.data.sysAssetA1Data.forEach(item => {
        newform[item.SYS_ASSET_A1_50] = "";
      });
      this.excelcolform = newform;
      this.$nextTick(() => {
        this.page.loading = false;
      });
    },
    OnrowClick(row) {
      this.$emit("rowClick", row);
    },
    onSelectionChange(rows) {
      this.$emit("onSelectionChange", rows);
    },
    onSelect(rows, row) {
      if (rows.length == 0) {
        this.$emit("onSelectClear");
        return;
      }
      if (row) {
        const selected = rows.includes(row);
        this.$emit("onSelect", rows, row, selected);
      } else {
        rows.forEach(item => {
          const selected = true;
          this.$emit("onSelect", rows, item, selected);
        });
      }
    },
    //改变时判断是否重复选择
    onColChange(val, col) {
      //如果别的列已经选择了 就清空 替换
      Object.keys(this.excelcolform).forEach(item => {
        if (this.excelcolform[item] == val && item != col) {
          this.excelcolform[item] = "";
        }
      });
      this.$emit("onColChange", this.excelcolform);
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    //分页后的数据
    tableData() {
      let _data = [];
      _data = this.data.sysAssetA1Data;
      if (this.page.search) {
        _data = _data.search({
          SYS_ASSET_A1_50: val => val.includes(this.page.search)
        });
      }
      _data.forEach(item => {
        item.excelCol = "";
      });
      return _data;
    }
  },
  //监视
  watch: {
    //选择文件后列改变
    /**1.4 读取Excel列头，与资产字段全字匹配 */
    excelCol(val) {
      this.page.loading = true;
      this.$nextTick(() => {
        //{SYSTEMA150:""} 系统列对象
        //如果数组里包含对象的key key的值就是该项
        let newform = {};
        val.forEach(item => {
          newform[item] = item;
        });
        this.excelcolform = newform;
        this.$emit("onColChange", this.excelcolform);
        // console.log(this.excelcolform);
        this.page.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
